import React, { Component } from "react";
import {
  StyleSheet,
  ImageBackground,
  ScrollView,
  SafeAreaView,
  View,
  TextInput,
  Text,
  PanResponder,
  KeyboardAvoidingView,
  Keyboard
} from "react-native";
import Button from "../../components/Button";
import { theme_text, theme_btnColor } from "../../utils/appTheme";
import Toast from "react-native-simple-toast";
import { connect } from "react-redux";
import { userInfoAction } from "../../redux/action/login_action";
import { login } from "../../netServer/mine";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false
    };
    this._clickLoginButton = this._clickLoginButton.bind(this);
  }
  static navigationOptions = ({ navigation }) => ({
    header: null
  });
  componentWillMount() {
    this._panResponder = PanResponder.create({
      // 要求成为响应者：
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // console.log("onPanResponderGrant", gestureState);
        Keyboard.dismiss();
        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
        // gestureState.{x,y} 现在会被设置为0
      },
      onPanResponderMove: (evt, gestureState) => {
        // console.log("onPanResponderMove", gestureState);
        // 最近一次的移动距离为gestureState.move{X,Y}
        // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // console.log("onPanResponderRelease", gestureState);
        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
        // 一般来说这意味着一个手势操作已经成功完成。
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        return true;
      }
    });
  }

  componentDidMount() {}

  _clickLoginButton() {
    // this.props.navigation.navigate('Home')

    // return
    this.setState({ isLogin: true });

    let params = new FormData();
    params.append("username", this.props.account);
    params.append("password", this.props.password);
    login(params, response => {
      let { code, data, msg } = response;

      if (code == "0") {
        let { user } = data;
        this.props.dispatch(userInfoAction("user_userinfo", user));
        this.props.navigation.navigate("Home");
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER);
      }

      this.setState({ isLogin: false });
    });
  }

  render() {
    return (
      <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
        <ImageBackground
          resizeMode="cover"
          source={require("./src/Bitmap.png")}
          style={{ width: screenWidth, height: screenHeight }}
        >
          <SafeAreaView
            keyboardVerticalOffset={100}
            behavior="padding"
            style={{
              width: screenWidth,
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <ScrollView
              keyboardShouldPersistTaps="always"
              keyboardDismissMode="on-drag"
              scrollEnabled={false} //防止滑动
              contentContainerStyle={{
                flex: 1,
                width: screenWidth,
                justifyContent: "center",
                alignItems: "center"
              }}
              {...this._panResponder.panHandlers}
            >
              <View style={styles.loginContent}>
                <TextInput
                  style={styles.inputFile}
                  underlineColorAndroid="transparent"
                  keyboardType="numeric"
                  onChangeText={textValue => {
                    this.props.dispatch(
                      userInfoAction("user_account", textValue)
                    );
                  }}
                  value={this.props.account}
                  placeholder="账号"
                  placeholderTextColor={theme_text.prompt_Color}
                  maxLength={20}
                />
                <View style={{ height: 10 }} />

                <TextInput
                  style={styles.inputFile}
                  underlineColorAndroid="transparent"
                  secureTextEntry={true}
                  onChangeText={textValue => {
                    this.props.dispatch(
                      userInfoAction("user_password", textValue)
                    );
                  }}
                  value={this.props.password}
                  placeholder="密码"
                  placeholderTextColor={theme_text.prompt_Color}
                  maxLength={20}
                />
                <View style={{ height: 20 }} />
                <Button
                  isLoading={this.state.isLogin}
                  isLoadStr="登录中..."
                  style={[
                    styles.buttonCommit,
                    { backgroundColor: theme_btnColor.main_color }
                  ]}
                  onPress={this._clickLoginButton}
                >
                  <Text
                    style={{
                      fontSize: 18,
                      color: theme_text.background_Color
                    }}
                  >
                    登录
                  </Text>
                </Button>
              </View>
            </ScrollView>
          </SafeAreaView>
        </ImageBackground>
      </KeyboardAvoidingView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  loginContent: {
    //height: 40,
    top: 50,
    width: 0.75 * screenWidth,
    height: 0.35 * screenHeight,
    justifyContent: "center",
    alignItems: "center"
  },
  inputFile: {
    width: 200,
    height: 40,
    borderColor: theme_text.prompt_Color,
    borderWidth: 1,
    paddingLeft: 15,
    fontSize: 14,
    color: theme_text.main_Color
  },
  buttonCommit: {
    width: 200,
    // height: 46,
    borderRadius: 6
  }
});

function select(store) {
  return {
    account: store.userInfo.user_account,
    password: store.userInfo.user_password
  };
}

export default connect(select)(Login);
